<template>
  <div>
    <Header title="豆瓣电影评分" :left-arrow="false" />
    <MovieSection
      v-for="(item, index) in sectionData"
      :section="item"
      :key="index"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import MovieSection from "@/components/MovieSection";
import Header from "@/components/Header";
import { getMovieSection } from "@/utils/movie";
export default defineComponent({
  name: "App",
  components: {
    Header,
    MovieSection,
  },
  setup() {
    const sectionData = ref([]);
    const movie_keys = ["coming_soon", "in_theaters", "top250"];
    const promiseArr = movie_keys.map((key) => getMovieSection(key));
    Promise.all(promiseArr).then((results) => {
      console.log(results);
      sectionData.value = results;
    });
    return {
      sectionData,
    };
  },
});
</script>

